<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
        <link rel="preload" href="/node_modules/@finos/perspective-viewer/dist/cdn/perspective-viewer.wasm" as="fetch" type="application/wasm" crossorigin="anonymous" />
        <link rel="preload" href="/node_modules/@finos/perspective/dist/cdn/perspective-server.wasm" as="fetch" type="application/wasm" crossorigin="anonymous" />
        <link rel="stylesheet" crossorigin="anonymous" href="/node_modules/@finos/perspective-viewer/dist/css/themes.css" />
        <script src="https://cdn.jsdelivr.net/npm/fflate@0.7.3/umd/index.min.js"></script>
        <script type="module">
            import "/node_modules/@finos/perspective-viewer/dist/cdn/perspective-viewer.js";
            import "/node_modules/@finos/perspective-viewer-datagrid/dist/cdn/perspective-viewer-datagrid.js";
            import "/node_modules/@finos/perspective-viewer-d3fc/dist/cdn/perspective-viewer-d3fc.js";
            import "/node_modules/@finos/perspective-viewer-openlayers/dist/cdn/perspective-viewer-openlayers.js";

            import { worker } from "/node_modules/@finos/perspective/dist/cdn/perspective.js";

            const WORKER = await worker();
            const URL = `https://data.sfgov.org/resource/5cei-gny5.csv?$limit=50000`;

            async function get_evictions() {
                const arrow = localStorage.getItem(URL);
                if (arrow !== null) {
                    console.log("Using cached data from localStorage");
                    try {
                        const buffer = fflate.strToU8(arrow, true);
                        return await WORKER.table(fflate.decompressSync(buffer).buffer);
                    } catch (e) {
                        console.error("Can't load cached data", e);
                        localStorage.clear();
                    }
                }

                console.log("Downloading data from data.sfgov.org");
                const resp = await fetch(
                    URL
                    // "5cei-gny5.csv"
                    // "evictions.all.arrow"
                );
                const csv = await resp.text();
                const table = await WORKER.table(csv);
                (async () => {
                    console.log("Caching data");
                    const view = await table.view();
                    const arrow = await view.to_arrow();
                    try {
                        const x = fflate.compressSync(new Uint8Array(arrow));
                        const zipped = fflate.strFromU8(x, true);
                        localStorage.setItem(URL, zipped);
                    } catch (e) {
                        console.error("Can't cache data from data.sfgov.org", e);
                    }
                })();

                return table;
            }

            async function load() {
                const el = document.getElementsByTagName("perspective-viewer")[0];

                const evictions = get_evictions();
                const layout_json = await fetch("layout.json");
                const layout = await layout_json.json();

                el.load(await evictions);
                el.restore(layout);
            }

            load();
        </script>

        <style>
            perspective-viewer {
                position: absolute;
                top: 0;
                left: 0;
                bottom: 0;
                right: 0;
            }
        </style>
    </head>

    <body>
        <perspective-viewer editable> </perspective-viewer>
    </body>
</html>
